<template>
  <div class="findPassword">
    <main class="middle">
      <box-head />
      <section class="findMain">
        <div class="mainTop">账号安全-找回密码</div>
        <div class="mainBottom">
          <div class="steps">
            <div :class="['step', 'selectStep']">1</div>
            <span :class="['stepLine', 'selectLine']"></span>
            <div
              :class="['step', step === 2 || step === 3 ? 'selectStep' : '']"
            >
              2
            </div>
            <span :class="['stepLine', step === 3 ? 'selectLine' : '']"></span>
            <div :class="['step', step === 3 ? 'selectStep' : '']">3</div>
          </div>
          <div class="stepInfo">
            <span :class="['stepWord', 'selectStep']">信息验证</span>
            <span
              :class="[
                'stepWord',
                step === 2 || step === 3 ? 'selectStep' : ''
              ]"
              >修改密码</span
            >
            <span :class="['stepWord', step === 3 ? 'selectStep' : '']"
              >完成修改</span
            >
          </div>
          <form v-show="step !== 3">
            <input
              :type="inputType.firstInputType"
              :placeholder="placeholder.placeholder1"
              :class="[
                'firstInput',
                showTip.ifShowFirstTip ||
                showTip.ifShowSecondTip ||
                codeError === '邮箱与验证码不匹配'
                  ? 'firstInputWarn'
                  : '',
                firstInputStatus ? 'inputStatus' : ''
              ]"
              @input="checkEmail"
              @blur="checkEmail"
              v-model="email"
            />
            <p v-show="showTip.ifShowFirstTip" class="firstTip">
              {{ tips.firstTip }}
            </p>
            <p v-show="showTip.ifShowSecondTip" class="firstTip">
              {{ tips.secondTip }}
            </p>
            <input
              :type="inputType.secondInputType"
              :placeholder="placeholder.placeholder2"
              :class="[
                'secondInput',
                code !== '' && firstInputStatus ? 'inputStatus' : '',
                codeError ? 'firstInputWarn' : '',
                step === 2 ? 'secondInputStepTwo' : ''
              ]"
              v-model="code"
              @input="checkCode"
            />
            <el-button
              :type="buttonType.firstType"
              :class="[
                'firstBtn',
                !buttonStatus.firstStatus ? 'successBtn' : ''
              ]"
              :disabled="buttonStatus.firstStatus"
              @click="getCode"
              v-show="showGetCode"
              >{{ getCodeInfo }}</el-button
            >
            <p class="codeError" v-show="codeError">{{ codeError }}</p>
            <el-button
              :type="buttonType.secondType"
              :class="[
                'secondBtn',
                !buttonStatus.secondStatus ? 'successBtn2' : ''
              ]"
              :disabled="
                buttonStatus.secondStatus ||
                  showTip.ifShowFirstTip ||
                  showTip.ifShowSecondTip
              "
              @click="nextStep"
              >下一步</el-button
            >
            <div v-show="step === 2" class="passwordTip">
              <p>1.密码长度需8-16位</p>
              <p>2.需包含数字和字母，符合至少两种元素</p>
            </div>
          </form>
          <div class="successChange" v-show="step === 3">
            <img src="../../assets/findPassword/successChange.png" alt="" />
            <p>完成修改,请重新登录</p>
          </div>
          <button class="lastBtn" v-show="step === 3" @click="jumpToLogin">
            完成
          </button>
        </div>
        <div class="mainFooter">荷福集团上海研究院 版权所有</div>
      </section>
    </main>
  </div>
</template>

<script>
import boxHead from './components/header.vue'

import { getEmailCode } from '../../api/getCode'
import { confirmEmailCode } from '../../api/confirmCode'
import { updatePassword } from '../../api/updatePassword'

import { validEmail, validPassword } from '../../utils/validate'

export default {
  data () {
    return {
      step: 1,
      placeholder: {
        placeholder1: '请输入邮箱',
        placeholder2: '请输入验证码'
      },
      inputType: {
        firstInputType: 'text',
        secondInputType: 'text'
      },
      email: '',
      code: '',
      tips: {
        firstTip: '',
        secondTip: ''
      },
      firstInputStatus: false,
      showTip: {
        ifShowFirstTip: false,
        ifShowSecondTip: false
      },
      buttonType: {
        firstType: '',
        secondType: ''
      },
      buttonStatus: {
        firstStatus: true,
        secondStatus: true
      },
      getCodeInfo: '获取验证码',
      resetTime: '',
      time: 59,
      codeError: '',
      showGetCode: true,
      newInfo: {
        email: ''
      }
    }
  },
  components: {
    boxHead
  },
  watch: {
    time (val) {
      if (val === 0) {
        clearInterval(this.resetTime)
        this.time = 59
        this.buttonStatus.firstStatus = false
        this.getCodeInfo = '获取验证码'
      }
    }
  },
  methods: {
    // 封装展示第一条提示消息的函数
    showFirstTip (text) {
      this.showTip.ifShowFirstTip = true
      this.firstInputStatus = false
      this.tips.firstTip = text
    },
    // 第一个表单校验
    checkEmail () {
      if (this.step === 1) {
        this.codeError = ''
        this.showTip.ifShowSecondTip = false

        if (this.email === '') {
          this.showTip.ifShowFirstTip = false
          this.firstInputStatus = ''
          return
        }
        this.getCodeInfo = '获取验证码'
        clearInterval(this.resetTime)
        this.time = 59
        if (!validEmail(this.email)) {
          this.showFirstTip('请输入正确的邮箱格式')
          this.buttonStatus.firstStatus = true
        } else {
          this.showTip.ifShowFirstTip = false
          this.firstInputStatus = true
          this.buttonStatus.firstStatus = false
          if (this.code !== '') {
            this.buttonStatus.secondStatus = false
          }
        }
      }
      if (this.step === 2) {
        if (this.email === '') {
          this.showTip.ifShowFirstTip = false
          this.firstInputStatus = ''
          return
        }
        if (!validPassword(this.email)) {
          this.showFirstTip('请输入正确的密码格式')
        } else {
          this.showTip.ifShowFirstTip = false
          this.firstInputStatus = true
        }

        if (this.code !== '') {
          if (this.code !== this.email) {
            this.showFirstTip('两次密码输入不一致')
          } else {
            this.showTip.ifShowFirstTip = false
            this.firstInputStatus = true
          }
        }
      }
    },
    // 邮箱验证码获取
    getCode () {
      this.checkEmail()
      this.codeError = ''
      if (this.showTip.ifShowFirstTip) {
        return false
      }
      getEmailCode(this.email).then(res => {
        if (res.data.code !== 200) {
          this.tips.secondTip = res.data.message
          this.showTip.ifShowSecondTip = true
          if (this.showTip.ifShowSecondTip) {
            this.buttonStatus.firstStatus = true
          }
        } else {
          this.buttonStatus.firstStatus = true
          localStorage.setItem('email', this.email)
          this.getCodeInfo = '重新发送' + this.time
          this.resetTime = setInterval(() => {
            this.time--
            this.getCodeInfo = '重新发送' + this.time
          }, 1000)
        }
      })
    },
    // 验证码输入事件
    checkCode () {
      if (this.step === 1) {
        if (this.code === '') {
          this.buttonStatus.secondStatus = true
        } else if (this.firstInputStatus) {
          this.buttonStatus.secondStatus = false
          this.codeError = ''
        }
      }
      if (this.step === 2) {
        if (this.email !== '' && this.firstInputStatus) {
          if (this.code !== this.email) {
            this.showFirstTip('两次密码输入不一致')
          }
        }
        if (this.email === this.code) {
          this.firstInputStatus = true
          this.showTip.ifShowFirstTip = false
          this.buttonStatus.secondStatus = false
        }
        if (this.code === '') {
          this.buttonStatus.secondStatus = true
        }
      }
    },
    // 点击下一步
    nextStep () {
      if (this.step === 1) {
        const localEmail = localStorage.getItem('email')
        if (localEmail === this.email) {
          confirmEmailCode(this.code, this.email).then(res => {
            if (res.data.code !== 200) {
              this.codeError = res.data.message
              this.buttonStatus.secondStatus = true
            } else {
              this.step = 2
              this.buttonStatus.secondStatus = true
              this.placeholder.placeholder1 = '请输入您的新登录密码'
              this.placeholder.placeholder2 = '请再次确认您的登录密码'
              this.newInfo.email = this.email
              this.email = ''
              this.code = ''
              this.showGetCode = false
              this.firstInputStatus = false
              this.inputType.firstInputType = 'password'
              this.inputType.secondInputType = 'password'
            }
          })
        } else {
          this.codeError = '邮箱与验证码不匹配'
        }
      }
      if (this.step === 2) {
        updatePassword(this.code, this.newInfo.email, this.email).then(res => {
          if (res.data.code === 200) {
            this.step = 3
          }
        })
      }
    },
    // 返回登陆页
    jumpToLogin () {
      this.$router.push('/login')
    }
  },
  created () {}
}
</script>

<style scoped lang="scss">
.findPassword {
  background-color: #f0f0f0;
  height: 100%;
  padding-top: 1px;
  position: relative;
  .middle {
    width: 1200px;
    height: 711px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .findMain {
      height: 640px;
      border-radius: 10px;
      background-color: #fff;

      .mainTop {
        height: 108px;
        background-color: #2864fb;
        border-radius: 10px 10px 0 0;
        text-align: center;
        line-height: 108px;
        font-size: 28px;
      }

      .mainBottom {
        position: relative;
        .steps {
          position: absolute;
          top: 40px;
          left: 50%;
          transform: translateX(-50%);
          .step {
            display: inline-block;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 1.5px solid #e8e8e8;
            text-align: center;
            line-height: 44px;
            color: #333;
            font-size: 20px;
            vertical-align: middle;
          }
          .selectStep {
            border-color: #2864fb;
            color: #2864fb;
          }
          .stepLine {
            display: inline-block;
            width: 96px;
            height: 2px;
            background-color: #e8e8e8;
            margin: 0 16px;
          }

          .selectLine {
            background-color: #2864fb;
          }
        }
        .stepInfo {
          position: absolute;
          transform: translateX(-50%);
          left: 50%;
          top: 96px;
          font-size: 14px;
          .selectStep {
            color: #2864fb !important;
          }

          .stepWord {
            color: #333;
            margin-left: 2px;

            &:nth-child(2) {
              margin-left: 122px;
            }

            &:nth-child(3) {
              margin-left: 118px;
            }
          }
        }

        form {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 180px;
          width: 320px;
          input {
            height: 48px;
            border-radius: 5px;
            border: 1px solid #e6e6e6;
            font-size: 14px;
            color: #333;
            padding-left: 12px;
            line-height: 48px;
          }

          .firstInput {
            width: 320px;
            margin-bottom: 32px;
            line-height: 48px;
          }

          .firstInputWarn {
            border: 1px solid #ff2626 !important;
          }

          .inputStatus {
            border: 1px solid #2864fb;
          }

          .secondInput {
            width: 200px;
            line-height: 48px;
          }
          .secondInputStepTwo {
            width: 320px;
          }

          .firstBtn {
            height: 48px;
            margin-left: 10px;
            width: 110px;
          }

          .successBtn {
            color: #2864fb;
            border: 1px solid #2864fb;
          }

          .firstTip {
            position: absolute;
            color: #ff2626;
            left: 2%;
            top: 50px;
            font-size: 12px;
          }

          .secondBtn {
            width: 320px;
            height: 48px;
            margin-left: 0;
            margin-top: 40px;
          }

          .successBtn2 {
            color: #fff;
            border: 1px solid #2864fb;
            background-color: #2864fb;
          }

          .codeError {
            color: #ff2626;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 144px;
            font-size: 12px;
          }

          .passwordTip {
            font-size: 12px;
            color: #ff9700;
            position: absolute;
            line-height: 18px;
            right: -72%;
            top: 6px;
          }
        }

        .successChange {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 180px;
          text-align: center;
          img {
            width: 60px;
            height: 60px;
            margin-bottom: 16px;
          }
          p {
            color: #333;
            font-size: 16px;
          }
        }

        .lastBtn {
          width: 320px;
          height: 48px;
          background-color: #2864fb;
          border-radius: 5px;
          border: none;
          color: #fff;
          cursor: pointer;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 346px;
        }
      }

      .mainFooter {
        color: #999;
        font-size: 12px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px;
      }
    }
  }
}
</style>
